<!--<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>菜单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-menu&#45;&#45;horizontal > .el-submenu .el-submenu__title,
        .el-menu&#45;&#45;horizontal > .el-submenu.is-active .el-submenu__title,
        .el-submenu__title i {
            /*color: #fff;*/
        }
        .el-menu&#45;&#45;horizontal > .el-submenu.is-active .el-submenu__title {
            border-bottom: 2px solid #ff8923;
            /*color: #fff;*/
        }
        /*//鼠标悬浮时，子菜单的样式*/
          .el-menu-item:hover {
              outline: 0 !important;
              color: #ff8923 !important;
              /*background: none !important;*/
          }
        /*// 一级菜单选中的样式*/
           .el-menu-item.is-active{
               color: #ff8923 !important;
               border-bottom-color: transparent !important;
           }
        /*// 二级菜单 选中的样式*/
           .el-menu&#45;&#45;horizontal > .el-submenu.is-active .el-submenu__title{
               color: #ff8923 !important;
               border-bottom-color: transparent !important;
           }
        /*//鼠标悬浮时，主菜单的样式*/
          .el-submenu__title:focus,
          .el-submenu__title:hover {
              outline: 0 !important;
              /*color: #fff !important;*/
              background: none !important;
          }
 /*       .el-menu&#45;&#45;horizontal:focus,
        .el-menu&#45;&#45;horizontal:hover {
            outline: 0 !important;
            !*color: #fff !important;*!
            background: none !important;
        }*/
/*        .nav-menu-son .el-menu&#45;&#45;horizontal:hover{
            background: pink!important;
        }*/
/*        .el-menu {
            background-color: none !important;
        }*/
        .el-menu-item a:hover {
            background: none;
        }
        .el-menu&#45;&#45;popup-bottom-start {
            margin-top: -2px;
        }
        .el-menu&#45;&#45;popup {
            background: none !important;
            padding: 0 0;
            min-width: 120px !important;
            line-height: 40px !important;
            box-shadow: 0 4px 8px 0 rgba(25,14,109,0.13);
            border-radius: 5px;
        }
        .el-menu&#45;&#45;horizontal .el-menu {
            background: none;
        }

        .el-menu&#45;&#45;horizontal .el-menu .el-menu-item,
        .el-menu&#45;&#45;horizontal .el-menu .el-submenu__title {
            /*background-color: rgba(255, 255, 255, 0.6);*/
            float: none;
            height: 36px;
            line-height: 36px;
            padding: 0 22px;
            color: #929292 !important;
            z-index: 100;
            font-weight: 500;
        }
        /*//二次菜单悬浮及背景样式*/
          .el-menu&#45;&#45;popup-bottom-start .el-menu-item:hover{
              color: rgba(86,86,86,1) !important;
          }
        /*  子菜单的样式*/
        .el-menu&#45;&#45;popup-bottom-start .el-menu-item{
            background: #fff !important;
        }

        /*  .el-menu {
              color: white;
              background: #2d8cf0;
              border-right: none;
              position: relative;
          }
          .el-menu&#45;&#45;horizontal .el-menu&#45;&#45;popup .el-menu-item:hover span {
              !*color: #3597F8 !important;*!
              background: #ebf5fe !important;
          }
          .el-menu&#45;&#45;horizontal .el-menu&#45;&#45;popup>li.el-menu-item>i,
          .el-menu&#45;&#45;popup .el-submenu__title>i,
          .el-menu&#45;&#45;horizontal .el-menu&#45;&#45;popup>li.el-menu-item>span,
          .el-menu&#45;&#45;popup .el-submenu__title>span{
              color: #51575C;
          }
          .el-menu&#45;&#45;horizontal>.el-menu-item>i {
              display: block;
              height: auto;
              line-height: 0;
              margin: 0;
              width: 100%;
              position: relative;
              top: 54%;
              transform: translate(0, -0.75rem);
              font-size: 1.125rem !important;
              color: #fff !important;
          }
          .el-menu&#45;&#45;popup {
              background-color: #fff !important;
              color: #666;
          }
          template > .el-menu-item{
              background: white !important;
          }*/
    </style>
</head>
<body>
<div id="app">
    <el-menu mode="horizontal">
        <template v-for="menu in menuData">
            <menu-tree v-if="menu.children.length > 0" :key="menu.index" :menu="menu"></menu-tree>
            <el-menu-item v-else>{{menu.name}}</el-menu-item>
        </template>
    </el-menu>

</div>
</body>
<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<script th:src="@{/js/vue.js}"></script> &lt;!&ndash;vue要放在element ui前面&ndash;&gt;
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script language='javascript' th:inline="javascript">
    Vue.component('menu-tree',{  props: { menu: {} },data : function(){
            return {}
        },
        template:`
  <el-submenu v-if="menu.children.length > 0" popper-class="popper_menu" :index="menu.index">
    <template slot="title">
      <i :class="menu.icon"></i>
      <span>{{menu.name}}</span>
    </template>
    <template v-for="child in menu.children" >
      <menu-tree v-if="child.children.length > 0" :menu="child" :key="child.index"></menu-tree>
      <el-menu-item v-else :index="child.path" :key="child.index" >{{child.name}}</el-menu-item>
    </template>
  </el-submenu>
`,methods: {
        hh(){alert(1)}
        }})
    new Vue({
        el: '#app',
        data: function () {
            return {
                menuData: [
                    {
                        index: '111',
                        name: '111',
                        icon: '',
                        children: [
                            {
                                index: '1-1',
                                name: '22',
                                path: '',
                                children: []
                            },
                            {
                                index: '1-2',
                                name: '11',
                                path: 'stock',
                                children: []
                            },
                            {
                                index: '1-3',
                                name: '11',
                                path: '',
                                children: []
                            },
                            {
                                index: '1-4',
                                name: '11',
                                path: '',
                                children: []
                            },
                            {
                                index: '1-5',
                                name: '11',
                                path: '',
                                children: [
                                    {
                                        index: '1-6-1',
                                        name: '11',
                                        path: '',
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        index: '2',
                        name: '11',
                        icon: '',
                        children: [
                            {
                                index: '2-1',
                                name: '11',
                                path: '',
                                children: [{
                                    index: '1-1',
                                    name: 'haha',
                                    path: '',
                                    children: [{
                                        index: '1-1',
                                        name: '22',
                                        path: '',
                                        children: []
                                    },]
                                },]
                            }
                        ]
                    },{
                        index: '1-1',
                        name: '22',
                        path: '',
                        children: []
                    },
                ]

            }
        },
        created() {

        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        /* 水平样式 */
        .el-menu--horizontal>div>.el-submenu {
            float: left;
        }
        /* 一级菜单的样式 */
        .el-menu--horizontal>div>.el-menu-item {
            float: left;
            height: 60px;
            line-height: 60px;
            margin: 0;
            border-bottom: 2px solid transparent;
            color: #909399;
        }
        /* 解决下图1 下拉三角图标 */
        .el-menu--horizontal>div>.el-submenu .el-submenu__icon-arrow {
            position: static;
            vertical-align: middle;
            margin-left: 8px;
            margin-top: -3px;
        }
        /* 解决下图2 无下拉菜单时 不对齐问题 */
        .el-menu--horizontal>div>.el-submenu .el-submenu__title {
            height: 60px;
            line-height: 60px;
            border-bottom: 2px solid transparent;
            color: #909399;
        }
        .el-menu.el-menu--horizontal{
            border-bottom:solid 0px #e6e6e6
        }
        #app {
        position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .el-container{
            weight:100%;
            height: 100%;
        }
html{
    overflow-x: hidden;
    overflow-y: hidden;
}
        /*-----*/
        i {
            color: white !important;
        }
        .el-menu-item.is-active >span{
            color: #409eff;
        }
        .el-menu-item.is-active >i{
            color: #409eff !important;
        }

        /*   */


        /*!/鼠标悬浮时，主菜单的样式*/
        .el-submenu__title:focus,
        .el-submenu__title:hover,
        .el-submenu__title >i:focus,
        .el-submenu__title >i:hover {
            outline: 0 !important;
            /*color: #f80404 !important;*/
            background: none !important;
        }
/*        .el-menu-item a:hover {
            background: none;
        }*/
        .el-menu--popup-bottom-start {
            margin-top: -2px;
        }

        .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
            min-width: 150px !important;
        }
        .el-menu--horizontal .el-menu .el-menu-item.is-active,
        .el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title {
            color: #bdbbbb;
        }
    </style>
</head>
<body style="overflow-x:hidden;">
<div id="app">
    <!--router  active-text-color="#409eff"-->
    <el-row type="flex"  justify="space-between" align="middle" style="background:#333;">
        <el-col :span="20">
    <el-menu
            :default-active="activeIndex"
            class="elMenu"
            background-color="#363737"
            text-color="#fff"
            :unique-opened="true"
            mode="horizontal"
            ref="elMenu"
            @select="handleSelect">
        <!-- 递归动态菜单 -->
        <myitem :data="menuArr"></myitem>

    </el-menu>
        </el-col>
        <el-col :span="1">
            <a th:href="@{/logout}"  style="color: #fff">注销</a>
        </el-col>
    </el-row>
    <el-container style="background: #e8e8e8">
        <el-main width="initial" style="width: calc(100% - 10.625rem);overflow: hidden !important;margin: -10px">
<!--            <iframe   id="pageGo"  scrolling="no" width='100%'  src="/toActPage" frameborder='0' seamless></iframe>-->
            <iframe   id="pageGo"  scrolling="no" width='100%'  src="https://www.jianfast.com/" frameborder='0' seamless></iframe>
     <!--       <iframe  id="pageGo" frameborder=no  border=0  marginwidth=0  marginheight=0  width='100%' height='100%'
                    allowfullscreen='true'  src='/toActPage'></iframe>-->
        </el-main>
    </el-container>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script language='javascript' th:inline="javascript">
    Vue.component('myitem',{  props: {    data: {type: Array,
                default: [],
            },},data : function(){
            return {}
        },
        template:/*`
  <div>
    <template v-for="(item, index) in data">
    <el-submenu :key="index" :index="item.path+''"  v-if="item.children.length > 0" >
        <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
        </template>
        <myitem :data="item.children"></myitem>
    </el-submenu>
        <el-menu-item :key="index" v-else :index="item.path+''">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        </template>
        </div>`*/
            `<div>
    <template v-for="(item, index) in data">
    <el-submenu :key="index" :index="item.id"  v-if="item.children.length > 0" >
        <template slot="title">
        <i :class="item.icon" ></i>
        <span>{{ item.name }}</span>
        </template>
        <myitem :data="item.children"></myitem>
    </el-submenu>
        <el-menu-item :key="index" v-else :index="item.pagePath">
        <i :class="item.icon" ></i>
        <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        </template>
        </div>`,methods: { }
    })
    new Vue({
        el: '#app',
        data: function () {
            return {
                username:[[${session.username}]],
                activeIndex: '0',
                menuArr:[]
            }
        },
        created() {
            this.init()
        },
        methods: {
            initFrame(){
                var hNum = document.documentElement.clientHeight - 80
                var f = document.getElementById('pageGo')
                f.style.height = '800px !important;'
                var h = document.createAttribute("height")
                h.value = hNum
                f.setAttributeNode(h)
            },
            init(){
                _this = this
                _this.initFrame()
                $.get("/menu/getMenus", {}, function(msg) {
                    _this.menuArr = msg.data
                    // console.log( _this.menuArr)
                })
            },
            handleSelect(key, keyPath) {
                // console.log(key);
                // var user = ${session.username}
                /*
                console.log(h.value)
                console.log(f)*/
                _this.initFrame()
                // f.style.cssText = '800px !important;'
                if (key == '/activiti/create'){
                    // window.location.href='http://localhost:9090/modeler.html?modelId=115037'
                    window.open('http://localhost:9090/modeler.html?modelId=115037')
                }else {
                $("#pageGo").attr("src",key);
                }
            }
        }
    })
    function changeFrameHeight(that){
        //电脑屏幕高度-iframe上面其他组件的高度
        //例:我这里iframe上面还有其他一些div组件，一共的高度是120，则减去120
        $(that).height(document.documentElement.clientHeight - 60);

    }
</script>
</html>
